<template>
  <Teleport to="body">
    <Transition name="playlist">
      <div
        class="wrap"
        v-show="visible && playlist.length > 0"
        @click="changevisible()"
      >
        <div class="contain" @click.stop>
          <div class="header">
            <div class="left">
              <span class="icon"
                ><i :class="currenticon" @click="changemode()"></i
              ></span>
              <span class="text">{{ currenttext }}</span>
            </div>
            <div class="right">
              <i class="icon-clear" @click="clearall()"></i>
            </div>
          </div>

          <Scroll class="scrollwrap" ref="scrollref">
            <ul ref="scrollul">
              <TransitionGroup name="listone">
                <li
                  v-for="(item, i) in squencelist"
                  :key="item.id"
                  @click="changecurrentindex(item)"
                >
                  <div class="left">
                    <span class="icon"
                      ><i class="icon-play" v-show="i === squenceindex"></i
                    ></span>
                    <span>{{ item.name }}</span>
                  </div>
                  <div class="right">
                    <span class="icon">
                      <i
                        :class="collecticon(item)"
                        @click.stop="changecollect(item)"
                      ></i>
                    </span>
                    <span class="icon">
                      <i class="icon-delete" @click.stop="deletesong(item)"></i>
                    </span>
                  </div></li
              ></TransitionGroup>
            </ul>
          </Scroll>
          <div class="add" @click="showAddSong()">
            <i class="icon-add"></i>添加歌曲到队列
          </div>
          <div class="footer" @click="changevisible()">关闭</div>
        </div>
      </div>
    </Transition>
  </Teleport>
  <Confirm
    ref="confirmref"
    text="你确定清除全部歌曲吗"
    @confirm="confirmf"
    @cancel="hidef"
  ></Confirm>
  <Addsong ref="addsongref"></Addsong>
</template>

<script>
import { useStore } from 'vuex'
import { computed, nextTick, ref, watch } from 'vue'
import Scroll from '@/components/base/scroll/scroll.vue'
import Confirm from '@/components/base/confirm/confirm.vue'
import Addsong from '@/components/addSong/addsong'
export default {
  name: 'Playlist',
  components: { Scroll, Confirm, Addsong },
  setup () {
    const store = useStore()
    const scrollref = ref(null)
    const scrollul = ref(null)
    const confirmref = ref(null)
    const addsongref = ref(null)
    const visible = ref(false)
    const iconarr = ['icon-sequence', 'icon-random', 'icon-loop']
    const textarr = ['顺序播放', '随机播放', '循环播放']
    const currenticon = computed(() => iconarr[store.state.playmode | 0])
    const currenttext = computed(() => textarr[store.state.playmode | 0])
    const collectlist = computed(() => store.state.collectlist)
    const squencelist = computed(() => store.state.squencelist)
    const squenceindex = computed(() => store.getters.squenceindex)
    const playlist = computed(() => store.state.playlist)
    function collecticon (song) {
      const index = collectlist.value.findIndex((item) => item.id === song.id)
      if (index !== -1) {
        return 'icon-favorite'
      } else {
        return 'icon-not-favorite'
      }
    }

    async function changevisible () {
      visible.value = !visible.value
      await nextTick()
      scrollref.value.scroll.refresh()
      scrollref.value.scroll.scrollToElement(
        scrollul.value.children[squenceindex.value],
        300
      )
    }

    function changemode () {
      store.commit('changemode')
    }

    function changecollect (song) {
      store.commit('changecollect', song)
    }

    function changecurrentindex (song) {
      const index = playlist.value.findIndex((item) => item.id === song.id)
      store.commit('changecurrentindex', index)
    }

    // 滚动到对应歌曲
    watch(squenceindex, async (newv) => {
      if (!playlist.value.length) return
      scrollref.value.scroll.refresh()
      await nextTick
      scrollref.value.scroll.scrollToElement(scrollul.value.children[newv], 300)
    })

    // 删除一个歌曲
    function deletesong (song) {
      store.commit('deleteone', song)
    }
    // 清除全部歌曲
    function clearall () {
      confirmref.value.show()
    }
    function confirmf () {
      store.dispatch('clearall')
      scrollref.value.scroll.refresh()
      confirmref.value.hide()
    }
    function hidef () {
      confirmref.value.hide()
    }

    // 添加一个歌曲
    function showAddSong () {
      addsongref.value.show()
    }
    return {
      hidef,
      addsongref,
      clearall,
      deletesong,
      changecurrentindex,
      changecollect,
      currenticon,
      currenttext,
      squencelist,
      squenceindex,
      showAddSong,
      collecticon,
      visible,
      changevisible,
      scrollref,
      changemode,
      scrollul,
      confirmref,
      confirmf,
      playlist
    }
  }
}
</script>

<style scoped lang="scss">
.wrap {
  position: fixed;
  bottom: 0;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background-color: rgba(0, 0, 0, 0.3);
}
.contain {
  position: fixed;
  width: 100%;
  height: 66%;
  bottom: 0;
  left: 0;
  z-index: 10;
  background-color: #333;
  color: rgba(255, 255, 255, 0.3);
  & > .header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 12%;
    padding: 0 25px;
    & > .left {
      & > .icon {
        font-size: 24px;
        color: rgba(255, 205, 49, 0.5);
        margin-right: 10px;
      }
      & > .text {
        height: 24px;
        line-height: 24px;
        font-size: 14px;
      }
    }
    & > .right {
      font-size: 14px;
      color: rgba(255, 255, 255, 0.3);
    }
  }
  & > .scrollwrap {
    overflow: hidden;
    height: 57%;
    width: 100%;
    & > ul {
      & > li {
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 0 25px;
        position: relative;
        & > .left {
          & > .icon {
            position: absolute;
            left: 0;
            font-size: 12px;
            color: rgba(255, 205, 49, 0.5);
            margin-left: 10px;
          }
          & > .text {
            text-overflow: ellipsis;
            overflow: hidden;
            white-space: nowrap;
            font-size: 14px;
            color: rgba(255, 255, 255, 0.3);
          }
        }
        & > .right {
          font-size: 12px;
          color: #ffcd32;
          & > span:nth-child(1) {
            margin-right: 20px;
          }
        }
      }
    }
  }
  & > .add {
    height: 30px;
    line-height: 30px;
    width: 140px;
    text-align: center;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.5);
    border-radius: 100px;
    color: rgba(255, 255, 255, 0.5);
    margin: 15px auto;
  }
  & > .footer {
    text-align: center;
    line-height: 50px;
    background: #222;
    font-size: 16px;
    color: rgba(255, 255, 255, 0.5);
  }
}
</style>
